/* control-appmenu 菜单 start */
$control-appmenu: (
  'collapse-item-hover-color': getCssVar(color, primary, hover, text),
  'collapse-item-padding': getCssVar(spacing, base),
  'icon-width': getCssVar(width-icon, large),
  'icon-height': getCssVar(width-icon, large),
  'icon-margin': 0 getCssVar(spacing, tight) 0 0,
  'icon-position': calc(getCssVar(spacing, base) - 2px),
  'icon-size': getCssVar(width-icon,medium),
  'collapse-height': getCssVar(spacing, super-loose),
  'scorll-color': getCssVar(color, scroll, menu),
);

$control-appmenu-item: (
  'selected-border-color': transparent,
  'selected-color': getCssVar(color, primary, active, text),
  'selected-bg-color': getCssVar(color, primary, active),
  'hover-color': getCssVar(color, primary, hover, text),
  'hover-bg-color': getCssVar(color, primary, hover),
  'padding': getCssVar(spacing, tight),
  'border-radius': getCssVar(border-radius, small),
  'border': 2px solid getCssVar(color, text, 1),
  'font-size': getCssVar(font-size, header-6),
  'height': 42px,
  'gap': 2px,
  'color': getCssVar(color, text, menu),
  'separator-color': getCssVar(color, scroll, menu),
  'horizontal-selected-color': getCssVar(color, primary, active, text),
  'horizontal-selected-bg-color': getCssVar(color, primary, active),
  'horizontal-hover-color': getCssVar(color, primary, hover, text),
  'horizontal-hover-bg-color': getCssVar(color, primary, hover),
  'horizontal-color': getCssVar(color, text, menu),
  'horizontal-font-size': getCssVar(font-size, header-5),
  'horizontal-height': 100%,
  'horizontal-border-radius': 0,
  'horizontal-padding': 0 getCssVar(spacing, base-loose),
  'horizontal-padding-right': calc(getCssVar(width-icon, large) + getCssVar(spacing, base-loose)),
  'horizontal-popup-height': 40px,
);

/* control-appmenu 菜单 end */

// 垂直菜单项样式
@mixin menu-item-vertical-style {
  @include flex(row, flex-start, center);

  --el-menu-base-level-padding: #{getCssVar('control-appmenu-item', 'padding')};

  width: 100%;
  height: getCssVar('control-appmenu-item', 'height');
  font-size: getCssVar('control-appmenu-item', 'font-size');
  color: getCssVar('control-appmenu-item', 'color');
  white-space: nowrap;
  border-radius: getCssVar('control-appmenu-item', 'border-radius');

  &.is-active {
    color: getCssVar('control-appmenu-item', 'selected-color') !important;
    background-color: getCssVar('control-appmenu-item', 'selected-bg-color');
  }

  &:hover {
    color: getCssVar('control-appmenu-item', 'hover-color');
    background-color: getCssVar('control-appmenu-item', 'hover-bg-color');
  }
}

// 水平菜单项样式
@mixin menu-item-horizontal-style {
  height: getCssVar('control-appmenu-item', 'horizontal-height');
  padding: getCssVar('control-appmenu-item', 'horizontal-padding');
  font-size: getCssVar('control-appmenu-item', 'horizontal-font-size');
  line-height: getCssVar('control-appmenu-item', 'horizontal-height');
  color: getCssVar('control-appmenu-item', 'horizontal-color');
  white-space: nowrap;
  border-width: 0;
  border-radius: getCssVar('control-appmenu-item', 'horizontal-border-radius');

  &:hover {
    color: getCssVar('control-appmenu-item', 'horizontal-hover-color');
    background-color: getCssVar(
      'control-appmenu-item',
      'horizontal-hover-bg-color'
    );
  }

  &.is-active {
    // element-plus 给了 !important，所以这里也要加上
    color: getCssVar('control-appmenu-item', 'selected-color') !important;
    background-color: getCssVar('control-appmenu-item', 'horizontal-selected-bg-color');
    border-top: getCssVar('control-appmenu-item', 'border');
  }
}

// 收缩菜单项样式
@mixin menu-collapse-item-style {
  @include flex-center;

  padding: getCssVar(spacing, none);
  margin-bottom: getCssVar(spacing, tight);

}

// 菜单项选中样式
@mixin menu-item-selected-style {
  color: getCssVar('control-appmenu-item', 'selected-color');
  background-color: getCssVar('control-appmenu-item', 'selected-bg-color');
}

// 直接内容菜单项样式
@mixin raw-item-menu-style {
  --el-menu-hover-text-color: #{getCssVar('control-appmenu-item', 'color')};
  --el-menu-hover-bg-color: transparent;
  @include set-component-css-var('control-appmenu-item', $control-appmenu-item);
  .#{bem('control-appmenu', 'rawitem')} {
    min-height: getCssVar('control-appmenu-item', 'height');
    line-height: getCssVar('control-appmenu-item', 'height');
    .#{bem('rawitem')} {
      @include flex(row, flex-start, center);

      font-size: getCssVar('control-appmenu-item', 'font-size');
      color: getCssVar('control-appmenu-item', 'color');

      * {
        @include utils-ellipsis;
      }
    }
  }
}

@include b(control-appmenu) {
  position: relative;
  width: 100%;
  height: 100%;

  @include set-component-css-var('control-appmenu', $control-appmenu);
  @include set-component-css-var('control-appmenu-item', $control-appmenu-item);

  >.el-menu {
    height: 100%;
    padding:  getCssVar(spacing, none) getCssVar(spacing, base);
    overflow-y: auto;
    border-right: 0;
    @include raw-item-menu-style;
  }

  .el-sub-menu {
    .el-sub-menu__icon-arrow {
      right: 10px;
      width: getCssVar('control-appmenu', 'icon-width');
      height: getCssVar('control-appmenu', 'icon-height');
      margin-top: -10px;
      font-size: getCssVar('control-appmenu', 'icon-width');
    }

    .el-menu-item {
      padding: calc(getCssVar('control-appmenu', 'item-padding') * 0.875)
        calc(getCssVar('control-appmenu', 'item-padding') * 2.5);
    }

    .el-sub-menu__title >.#{bem('control-appmenu', 'counter')} {
      right: 30px;
    }
  }

  // 垂直
  .el-menu--vertical {
    width: 100%;

    // 菜单项样式
    .el-menu-item,
    .el-sub-menu__title {
      @include menu-item-vertical-style;
    }

    .el-menu-item + .el-menu-item {
      margin-top: getCssVar('control-appmenu-item', 'gap');
    }

    .el-sub-menu + .el-menu-item {
      margin-top: getCssVar('control-appmenu-item', 'gap');
    }

    .el-sub-menu + .el-sub-menu {
      margin-top: getCssVar('control-appmenu-item', 'gap');
    }

    .el-menu-item + .el-sub-menu {
      margin-top: getCssVar('control-appmenu-item', 'gap');
    }

    .el-sub-menu__title + .el-menu {
      margin-top: getCssVar('control-appmenu-item', 'gap');
    }

    &::-webkit-scrollbar-thumb {
      background-color: getCssVar('control-appmenu', 'scorll-color');
    }
  }

  // 水平
  .el-menu--horizontal {
    align-items: center;
    height: 100%;
    padding: getCssVar(spacing, none) getCssVar(spacing, base-tight);

    // 水平菜单默认为ellipsis模式，无需滚动条
    overflow-x: hidden;
    background-color: transparent;
    border-bottom: none;

    // 菜单项样式
    .el-menu-item,
    .el-sub-menu__title {
      @include menu-item-horizontal-style;

      .el-sub-menu__icon-arrow {
        right: getCssVar('control-appmenu', 'icon-position');
      }
    }

    .el-sub-menu {
      height: getCssVar('control-appmenu-item', 'horizontal-height');

      >.el-sub-menu__title {
        padding-right: getCssVar('control-appmenu-item', 'horizontal-padding-right');
      }
    }

    // 副菜单悬浮
    > .el-sub-menu:hover .el-sub-menu__title {
      color: getCssVar('control-appmenu-item', 'horizontal-hover-color');
      background-color: getCssVar(
        'control-appmenu-item',
        'horizontal-hover-bg-color'
      );
    }

    // 副菜单激活
    > .el-sub-menu.is-active .el-sub-menu__title {
      color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
      background-color: getCssVar('control-appmenu-item', 'horizontal-selected-bg-color');
      border-top: getCssVar('control-appmenu-item', 'border');
      border-bottom: 0;
    }

    &::-webkit-scrollbar-thumb {
      background-color: getCssVar('control-appmenu', 'scorll-color');
    }

    .el-divider--vertical {
      border-color: getCssVar(color, border);
    }
  }

  // 图标样式
  @include e(icon) {
    @include flex(row, center, center);

    width: getCssVar('control-appmenu', 'icon-width');
    height: getCssVar('control-appmenu', 'icon-height');
    margin: getCssVar('control-appmenu', 'icon-margin');
    font-size: getCssVar('control-appmenu','icon-size');

  }

  // 收缩
  @include when(collapse) {
    >.el-menu.el-menu--vertical {
      padding: 0 getCssVar(spacing, tight);
    }
    @include e(icon) {
      margin: getCssVar('spacing', 'none');
    }
    @include e(item) {
      @include menu-collapse-item-style;
    }
    @include b(control-appmenu-tooltip) {
      width: 100%;
    }
    @include b(control-appmenu-submenu) {
      display: block;

      > .el-sub-menu__title {
        @include flex-center;
        @include menu-collapse-item-style;

        white-space: nowrap;
        cursor: pointer;
      }
      @include e(item) {
        padding: getCssVar('spacing', 'none');
      }
    }
  }

  @include when(show-collapse){
    >.el-menu {
      height: calc(100% - getCssVar(control-appmenu, collapse-height));
      padding: 0 getCssVar(spacing, base);
    }
  }

  // 计数器样式
  .#{bem('control-appmenu', 'counter')} {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
  }

  // 滚动条样式
  @include when(scroll) {
    .el-menu.el-menu--vertical {
      padding-right: getCssVar(spacing, extra-tight);
    }
  }
}


@include b(control-appmenu-popup-container){
  @include raw-item-menu-style;

  // 收缩时菜单项样式
  // 以及水平菜单悬浮出来菜单样式
  &.el-menu--popup-container {
    @include set-component-css-var('control-appmenu', $control-appmenu);
    @include set-component-css-var('control-appmenu-item', $control-appmenu-item);

    border: none;
    box-shadow: getCssVar('shadow', 'elevated');

    .el-menu--popup {
      max-height: 100vh;
      padding: getCssVar('spacing', 'extra-tight');
      overflow: auto;
      background-color: getCssVar('color', 'primary');

      .el-menu-item,
      .el-sub-menu__title {
        @include flex(row, flex-start, center);

        width: 100%;
        height: getCssVar('control-appmenu-item', 'horizontal-popup-height');
        font-size: getCssVar('control-appmenu-item', 'font-size');
        color: getCssVar('control-appmenu-item', 'horizontal-color');
        white-space: nowrap;
        border-radius: getCssVar('control-appmenu-item', 'horizontal-border-radius');

        &.is-active {
          color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
          background-color: getCssVar('control-appmenu-item', 'horizontal-selected-bg-color');
        }

        &:hover {
          color: getCssVar('control-appmenu-item', 'hover-color');
          background-color: getCssVar('control-appmenu-item', 'hover-bg-color');
        }

        .el-icon {
          display: none;
        }
      }
    }
  }

  // 计数器样式
  .#{bem('control-appmenu', 'counter')} {
    position: absolute;
    top: 50%;
    right: 5px;
    height: 20px;
    padding: getCssVar('spacing', 'none') getCssVar('spacing', 'tight');
    line-height: initial;
    color: getCssVar('color', danger, text);
    background-color: getCssVar('color', 'danger');
    border-radius: getCssVar('border','radius','medium');
    transform: translateY(-50%);
  }

}

// 底部收缩按钮,自定义设置按钮
@include b(control-appmenu){
  @include b(control-appmenu-collapse-icon){
    position: absolute;
    right: getCssVar(spacing, base-tight);
    bottom: getCssVar(spacing, tight);
    font-size: getCssVar(font-size, header-5);
    cursor: pointer;
    @include when(collapse){
      transform: rotate(180deg);
    }
  }
  @include b('control-appmenu-menu-set'){
    position: absolute;
    bottom: var(--ibiz-spacing-tight);
    left: var(--ibiz-spacing-base-tight);
    font-size: var(--ibiz-font-size-header-5);
    cursor: pointer;
    @include when(horizontal){
      right: 0;
      bottom: 0;
      left: unset;
      display: flex;
      align-items: center;
      height: 100%;
    }

  }
  @include when(collapse) {
    @include b(control-appmenu-collapse-icon){
      right: 0;
      width: 100%;
      text-align: center;
    }
    @include b('control-appmenu-menu-set'){
      position: absolute;
      right: var(--ibiz-spacing-base-tight);
      bottom: calc(var(--ibiz-spacing-tight) + 32px);
      font-size: var(--ibiz-font-size-header-5);
      text-align: center;
      cursor: pointer;
  
    }
    @include when(show-menu-design){
      >.el-menu {
        height: calc(100% - getCssVar(control-appmenu, collapse-height) - getCssVar(control-appmenu, collapse-height));
      }
    }
  }
}

// 分割线
.#{bem('control-appmenu', 'separator', 'horizontal')} {
    margin: getCssVar(spacing, tight) 0;
    border-color: getCssVar(control-appmenu-item, separator-color);
}

.el-menu--horizontal.el-menu--popup-container:has(.#{bem(control-appmenu, item)},.#{bem(control-appmenu-submenu)}) {
  @include set-component-css-var('control-appmenu', $control-appmenu);
  @include set-component-css-var('control-appmenu-item', $control-appmenu-item);

  border: none;
  box-shadow: getCssVar('shadow', 'elevated');

  .el-menu--popup {
    padding: getCssVar('spacing', 'extra-tight');
    background-color: getCssVar('color', 'primary');

    .el-menu-item,
    .el-sub-menu__title {
      @include flex(row, flex-start, center);

      width: 100%;
      height: getCssVar('control-appmenu-item', 'horizontal-popup-height');
      font-size: getCssVar('control-appmenu-item', 'font-size');
      color: getCssVar('control-appmenu-item', 'horizontal-color');
      white-space: nowrap;
      border-radius: getCssVar('control-appmenu-item', 'horizontal-border-radius');

      &.is-active {
        color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
        background-color: getCssVar('control-appmenu-item', 'horizontal-selected-bg-color');
      }

      &:hover {
        color: getCssVar('control-appmenu-item', 'hover-color');
        background-color: getCssVar('control-appmenu-item', 'hover-bg-color');
      }

      .el-icon {
        display: none;
      }
    }
  }

  .el-menu .el-sub-menu.is-active>.el-sub-menu__title {
    color: getCssVar('control-appmenu-item', 'horizontal-selected-color');
  }
}


